<!-- 缴费 -->
<template>
    <div>
        <div class="header">
            缴费列表
        </div>
        <!-- 查询 -->
        <div class="top">
            <el-tabs v-model="activeName" type="card" @tab-click="handleClick" class="rignt">
                <el-tab-pane label="已缴费" name="first">
                    <div>
                        <el-form ref="form" :model="form" label-width="40px" class="box">
                            <el-form-item label="姓名" class="item-right">
                                <el-input v-model="query.name" class="ipt"></el-input>
                            </el-form-item>
                            <el-form-item label="园区名称" label-width="68px" class="item-right">
                                <el-input v-model="query.buildingid" class="ipt"></el-input>
                            </el-form-item>
                            <el-form-item label="房号" class="item-right">
                                <el-input v-model="query.houseno" class="ipt"></el-input>
                            </el-form-item>
                            <el-form-item label="联系方式" label-width="68px" class="item-right">
                                <el-input v-model="query.mobile" class="ipt"></el-input>
                            </el-form-item>
                            <el-form-item label="账期" class="item-right">
                                <el-input v-model="query.begindate" class="ipt"></el-input>
                            </el-form-item>
                            <el-form-item label="添加人" label-width="54px" class="item-right">
                                <el-input v-model="query.admin" class="ipt"></el-input>
                            </el-form-item>
                            <el-form-item label="流水单号" label-width="68px" class="item-right">
                                <el-input v-model="query.orderno" class="ipt"></el-input>
                            </el-form-item>
                            <el-button type="primary" style="margin-left: 30px;width: 100px; height: 40px;"
                                @click="onSubmit">查询
                            </el-button>
                            <el-button type="primary" style="margin-left: 30px;width: 100px; height: 40px;">重置
                            </el-button>
                        </el-form>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="未缴费" name="second">
                    <div>
                        <el-form ref="form" :model="form" label-width="40px" class="box">
                            <el-form-item label="姓名" class="item-right">
                                <el-input v-model="query.name" class="ipt"></el-input>
                            </el-form-item>
                            <el-form-item label="园区名称" label-width="68px" class="item-right">
                                <el-input v-model="query.buildingid" class="ipt"></el-input>
                            </el-form-item>
                            <el-form-item label="房号" class="item-right">
                                <el-input v-model="query.houseno" class="ipt"></el-input>
                            </el-form-item>
                            <el-form-item label="联系方式" label-width="68px" class="item-right">
                                <el-input v-model="query.mobile" class="ipt"></el-input>
                            </el-form-item>
                            <el-form-item label="账期" class="item-right">
                                <el-input v-model="query.begindate" class="ipt"></el-input>
                            </el-form-item>
                            <el-form-item label="添加人" label-width="54px" class="item-right">
                                <el-input v-model="query.admin" class="ipt"></el-input>
                            </el-form-item>
                            <el-form-item label="流水单号" label-width="68px" class="item-right">
                                <el-input v-model="query.orderno" class="ipt"></el-input>
                            </el-form-item>
                            <el-button type="primary" style="margin-left: 30px;width: 100px; height: 40px;"
                                @click="onSubmit">查询
                            </el-button>
                            <el-button type="primary" style="margin-left: 30px;width: 100px; height: 40px;">重置
                            </el-button>
                        </el-form>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </div>
        <!-- 添加/批量删除 -->
        <div style="padding:0 30px;">
            <el-button type="primary" style="width: 100px; height: 40px;" @click="dialogVisible=true">添加</el-button>
            <el-button type="danger" style="width: 100px; height: 40px;" @click="dels">批量删除</el-button>
        </div>
        <!-- 列表 -->
        <div style="padding:20px">
            <Table :selection="selection" :tableCols="tableCols" :tableData="tableData" :total="total"
                @pagechange="pagechange" @selsChange="selsChange">
                <template #zhang="{row}" style="width:200px">
                    <span>{{row.begindate}}-{{row.enddate}}</span>
                </template>
                <template #state="{row}" style="width:200px">
                    <span v-if="row.state !=1">已缴费</span>
                    <span v-else>未缴费</span>
                </template>
                <template #option="{row}">
                    <el-button type="primary" size="mini">详情</el-button>
                    <el-button type="success" size="mini" @click="handleClick(row)">修改</el-button>
                    <el-button type="danger" size="mini" @click="del(row.id)">删除</el-button>
                </template>
            </Table>
        </div>

        <!-- 添加 -->
        <Add :dialogVisible="dialogVisible" :handleClickdata="handleClickdata" @isclose="isclose"></Add>
    </div>
</template>

<script>
import Table from '@/components/Table/Table.vue'
import Add from '@/components/add/addfee.vue'
import { feelist, Del, Dels } from '@/api/fee'
export default {
    components: {
        Table,
        Add
    },
    data() {
        return {
            dialogVisible: false,
            selection: true,
            activeName: 'first',
            form: {
                name: ''
            },
            tableCols: [
                { prop: "id", lable: "ID", width: 70 },
                { prop: "userName", lable: "姓名", width: 100 },
                { prop: "building", lable: "楼栋名", width: 150 },
                { prop: "houseno", lable: "房号", width: 70 },
                { prop: "mobile", lable: "联系方式", width: 150 },
                { prop: "type", lable: "缴费类型", width: 100 },
                { lable: "账期", coltype: "zhang", slotname: "zhang", },
                { prop: "price", lable: "应缴金额（元）", width: 100 },
                { prop: "addtime", lable: "导入时间", width: 200 },
                { prop: "admin", lable: "添加者", width: 100 },
                { lable: "状态", coltype: "state", slotname: "state", },
                { lable: "操作", coltype: "option", slotname: "option", },

            ],
            tableData: [],
            total: 0,
            query: {
                page: 1,
                psize: 5,
                key: ""
            },
            ids: [],
            handleClickdata:{}
        };
    },
    created() {
        this.getfeelist()
    },
    methods: {
        // 列表
        async getfeelist() {
            let res = await feelist(this.query)
            // console.log(res);
            if (res.errCode == 10000) {
                this.tableData = res.data.list
                this.total = res.data.counts
            }
        },
        // 单个删除
        async del(id) {
            let res = await Del({ id: id })
            if (res.errCode == "10000") {
                this.$message.success("删除成功");
                this.getfeelist();
            }
        },
        isclose(val, isrefresh = false, editdata = {},) {
            this.dialogVisible = val
            this.handleClickdata = editdata
            this.item = editdata
            if (isrefresh) {
                this.getfeelist()
            }
        },
        // // 修改
        handleClick(data) {
            // 浅拷贝
            // this.handleClickdata = data
            // 深拷贝
            
            this.handleClickdata = JSON.parse(JSON.stringify(data))
            this.dialogVisible = true
            
        },
        
        // 批量删除
        selsChange(pageconfig) {
            this.ids = pageconfig;
            console.log(this.ids);
        },
        dels() {
            // 删除前的提示
            this.$confirm("确认删除记录吗?", "提示", {
                type: "warning",
            }).then(async () => {
                let res = await Dels({ ids: this.ids })
                console.log(res);
                if (res.errCode == 10000) {
                    this.$message.success("删除成功")
                    this.getfeelist()
                }
            });
        },

        // 查询
        onSubmit() {
            this.getfeelist()
        },
        // 分页
        pagechange(val) {
            this.query = val,
                this.getfeelist()
        },
        // handleClick(tab, event) {
        //     console.log(tab, event);
        // }
    }
};
</script>

<style lang="less" scoped>
.header {
    display: flex;
    position: relative;
    padding: 0 10px;
    height: 50px;
    margin-bottom: 30px;
    border-bottom: 1px solid #eee;
    color: #427ff4;
    font-size: 16px;
}

.top {
    padding: 0 30px;
}

.box {
    display: flex;
}

.item-right {
    padding-right: 12px;
}

.ipt {
    width: 120px;
}
</style>